<template>      
    <div class="person">
        <h2>姓名：{{ name }}</h2>
        <h2>年龄：{{ age }}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
    </div>
</template>

<script lang="ts"  setup >
    import {reactive,toRefs} from 'vue' 
    
    //数据
    let person = reactive({
        name:'张三',
        age:18
    })
    
    let {name,age} = toRefs(person)

    //方法
    function changeName(){
        name.value += '~'
    }

    function changeAge(){
        age.value += 1
    }

</script>